<!-- 这是首页 -->
<template>
    <div>
        <van-nav-bar title="我的收藏" left-text="" left-arrow @click-left="onClickLeft" />
        <van-empty description="你暂时还没有收藏数据哦~" v-if="list.length==0" />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list :finished="page == total" finished-text="没有更多了" @load="onLoad" style="padding-bottom: 50px;">
                <div class="x" style="margin:25px 15px ;" v-for="(item, index) in list" :key="index">
                    <!-- <img :src="item.avatar" alt="Avatar" class="avatar" /> -->
                    <van-image radius="4" width="50" height="50" :src="item.avtar" />
                    <div class="y flex" style="margin-left: 10px;">
                        <div class="username">{{ item.nickname }}</div>
                        <div class="content-text">{{ item.content }}</div>
                        <van-grid :column-num="3" style="margin-top:8px" v-if="item.images.length>0" :gutter="1">
                            <van-image v-for="img, index in item.images" :key="index" style="margin: 1px;"
                                @click="ImagePreview(item.images, index)" radius="4" width="100" height="100" :src="img"
                                fit="cover" />
                        </van-grid>

                        <div class="timestamp">{{ item.time }}</div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import axios from '../utils/request'
import { Toast } from 'vant';
import { ImagePreview } from 'vant';
export default {
    components: {
        [ImagePreview.Component.name]: ImagePreview.Component,
    },
    data() {
        return {

            list: [],//要显示的圈子数据
            page: 1,
            refreshing: false,
            total: 1//表示总页码数
        };
    },
    mounted() {//生命周期函数，刷新页面会调用
        this.getList()
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        ImagePreview(list, index) {
            ImagePreview({
                images: list,
                startPosition: index,
            });
        },
        goPublic() {
            this.$router.push('/public')
        },
        //下拉刷新触发
        onRefresh() {
            this.page = 1
            this.list = []
            this.getList();
        },
        //滑动到底部触发
        onLoad() {
            if (this.page == this.total) {
                return
            }
            this.page++ //请求下一页的数据
            this.getList();
        },
        getList() {

            axios.get("/circle/myLikeList?page=" + this.page).then(response => {
                this.refreshing = false

                    for (const img of response.data.data.list) {//处理图片数据，因为存入数据库的数据是字符串
                        if (img.images == null) {
                            img.images = []
                            continue
                        }
                        img.images = JSON.parse(img.images)//字符串转对象
                    }
                    this.list = [...this.list, ...response.data.data.list]//获取列表 合并两个数组
                    this.total = response.data.data.total
                    // Toast.success(response.data.msg);


            })
        }

    }
}
</script>

<style>
.flex {
    flex: 1
}

.username {
    color: #194e83;
    font-weight: 550;
    font-size: 17px;
}

.content-text {
    color: #000000;
    font-size: 15px;
    margin-top: 5px;
    font-family: '微软雅黑', '宋体';
}

.timestamp {
    color: #999999;
    font-size: 11px;
    margin-top: 12px;
}

.y {
    display: flex;
    flex-direction: column;
}

.x {
    display: flex;
    flex-direction: row;
}

.avatar {
    width: 80px;
    height: 80px;
}
</style>